<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100vw;
            height: 100vh;
            background-color: rgba(59, 56, 56, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            display: none;

        }

        .login {
            width: 400px;
            height: 150px;
            background-color: aqua;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;

        }

        .login .close {
            width: 10px;
            margin-left: auto;

        }

        .login .line {
            width: 350px;
            height: 40px;
            margin: auto;
            border: 2px solid white;
        }

        .login .min {
            width: 0px;
            height: 40px;
            background-color: white;
        }
    </style>
</head>

<body>
    <span id="login">点击登录</span>
    <p>文本内容dhskgjdhfgkjfhgksjgksd</p>
    <div class="box">
        <div class="login">
            <p class="close">X</p>
            <p>正在登录，请稍后。。。</p>
            <div class="line">
                <div class="min"></div>
            </div>
        </div>
    </div>

    <script>
        let login = document.getElementById("login");
        let box = document.getElementsByClassName("box")[0];
        let min = document.getElementsByClassName("min")[0];
        let line = document.getElementsByClassName("line")[0];
        let close = document.getElementsByClassName("close")[0];
        let stop;

        login.onclick = function () {
            // if (login.innerText === "点击登录") {
            box.style.display = "block";
            stop = setInterval(function () {
                min.style.width = min.offsetWidth + 1 + "px";
                if (min.offsetWidth === line.offsetWidth) {
                    clearInterval(stop);
                    box.style.display = "none";
                    login.innerText = "早上好";
                    login.onclick = null;
                }

            }, 10);
            // }

        }

        close.onclick = function () {
            box.style.display = "none";
            clearInterval(stop);
            // 清空进度条
            min.style.width="0px";

        }
    </script>
</body>

</html>